@use "../../variables" as *;

body {
  .el-radio-button {
    --el-radio-button-checked-bg-color: #{$qf-primary};
    --el-radio-button-checked-border-color: #{$qf-color-bg7};
    --el-radio-button-checked-text-color: #{$qf-color-white};
    --el-fill-color-blank: #{$qf-color-bg6};
    --el-button-text-color: #{$qf-color-font};
    --el-border-color: #{$qf-color-border1};
  }
  .el-radio-button__inner {
    padding: 10px 20px;
  }
  .el-radio.is-bordered.is-checked {
    background-color: $qf-color-bg5;
    --el-radio-checked-border-color: #{$qf-primary};
    --el-radio-checked-text-color: #{$qf-primary};
    --el-fill-color-blank: #{$qf-color-bg6};
    --el-button-text-color: #{$qf-color-white};
    --el-border-color: #{$qf-color-border1};
  }
  .el-radio.is-bordered {
    --el-border-color: #{$qf-color-bg7};
    &.is-disabled {
      --el-border-color-lighter: #{$qf-color-border3};
      .el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled .el-radio__inner:after {
        --el-disabled-bg-color: #{$qf-color-bg7};
      }
    }

    & + & {
      margin-right: 10px;
    }
  }
  .el-radio {
    .el-radio__inner:after {
      background-color: #{$qf-color-bg6};
    }
  }
}
